import React, { useState, useEffect } from 'react'
import { Space } from 'antd'
import { inject } from 'mobx-react'
import { observer } from 'mobx-react-lite'
import HomeStore from '../../stores/HomeStory'
interface NavigationMenuProps {
  HomeStore: HomeStore
}
interface ServerInterface {
  cnName: string
  enName: string
  url: string
}

const NavigationMenu: React.FC<NavigationMenuProps> = (
  props: NavigationMenuProps
) => {
  const [servers, setServers] = useState([] as ServerInterface[])

  useEffect(() => {
    setServers([
      {
        cnName: 'MQTT服务',
        enName: 'MQTT server',
        url: 'https://www.baidu.com',
      },
      {
        cnName: 'MySql服务',
        enName: 'MySql server',
        url: 'https://www.baidu.com',
      },
      {
        cnName: 'Redis服务',
        enName: 'Redis server',
        url: 'https://www.baidu.com',
      },
      {
        cnName: 'Etcd服务',
        enName: 'Etcd server',
        url: 'https://www.baidu.com',
      },
      {
        cnName: 'Prometheus服务',
        enName: 'Prometheus server',
        url: 'https://www.baidu.com',
      },
    ])
  }, [])
  return (
    <Space wrap className='content' size={16}>
      {servers.map((item, index: number) => (
        <a key={'' + index} href={item.url} target='_blank' rel='noreferrer'>
          {item.cnName}
        </a>
      ))}
    </Space>
  )
}

export default inject('HomeStore')(observer(NavigationMenu))
